<template>
  <header>
    <h2>
     产品类别
    </h2>
    <div class="chart" id="fourChart">
        图表内容
    </div>
  </header>
</template>

<script lang="ts">
import { inject, onMounted, reactive } from 'vue'
export default {
  setup () {
    const $echarts:any = inject('echarts')

    // 创建一个对象变量
    const chartData:any = {
      day: ['星期一', '星期二', '星期三', '星期四', '星期五'],
      Clothes: [200, 260, 205, 360, 370],
      digit: [312, 340, 472, 262, 164],
      Electrical: [464, 450, 364, 460, 380],
      gear: [480, 520, 270, 360, 460],
      Chemicals: [210, 406, 345, 380, 240]
    }

    onMounted(() => {
      // init初始化echarts图表
      const myChart = $echarts.init(document.getElementById('fourChart'))
      myChart.setOption({
        // 设置图表距离
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: chartData.day,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        legend: {},
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            name: '服饰',
            type: 'bar',
            data: chartData.Clothes,
            // 堆叠柱状图
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: '数码',
            type: 'bar',
            data: chartData.digit,
            // 堆叠柱状图
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: '家电',
            type: 'bar',
            data: chartData.Electrical,
            // 堆叠柱状图
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: '家居',
            type: 'bar',
            data: chartData.gear,
            // 堆叠柱状图
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: '日化',
            type: 'bar',
            data: chartData.Chemicals,
            // 堆叠柱状图
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          }
        ]
      })
    })

    return {
      chartData
    }
  }
}
</script>
<style lang='scss' scoped>
.chart {
  height: 5.375rem;
}
h2 {
  height: .3125rem;
  color: #fff;
  line-height: .3125rem;
  font-size: .25rem;
  text-align: center;
}
</style>
